lit-element

What is lit-element?

The lit-element package is a simple base class for creating fast, lightweight web components with the Lit library. It provides a declarative template system that ties your markup to your component's properties and state, along with reactive updates and a component lifecycle.

What are lit-element's main functionalities?

Declarative Templates

LitElement uses `html` tagged template literals to define templates that are bound to the component's properties. When properties change, the template is efficiently re-rendered.

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  static get properties() {
    return {
      message: { type: String }
    };
  }

  constructor() {
    super();
    this.message = 'Hello, World!';
  }

  render() {
    return html`<p>${this.message}</p>`;
  }
}
customElements.define('my-element', MyElement);

Reactive Properties

Properties can be made reactive using the `@property` decorator. When a reactive property changes, LitElement automatically updates the component's template.

import { LitElement, html, property } from 'lit-element';

class MyElement extends LitElement {
  @property({ type: String }) greeting = 'Hello';

  render() {
    return html`<h1>${this.greeting}, World!</h1>`;
  }
}
customElements.define('my-element', MyElement);

Lifecycle Methods

LitElement provides lifecycle methods such as `firstUpdated`, `updated`, and `disconnectedCallback` for managing the component's lifecycle events.

import { LitElement } from 'lit-element';

class MyElement extends LitElement {
  firstUpdated(changedProperties) {
    console.log('Component first updated!');
  }

  updated(changedProperties) {
    console.log('Component updated with changed properties:', changedProperties);
  }

  disconnectedCallback() {
    console.log('Component removed from the DOM!');
  }
}
customElements.define('my-element', MyElement);

Other packages similar to lit-element

react

React is a popular library for building user interfaces. It uses a virtual DOM for efficient updates, which is different from LitElement's direct DOM manipulation. React components are typically more verbose and use JSX for templating.

vue

Vue is a progressive framework for building UIs. Like LitElement, it offers a reactive and composable data model. Vue uses a virtual DOM similar to React and has a more opinionated structure, including a focus on single-file components.

svelte

Svelte is a compiler that generates efficient JavaScript code for creating web components. Unlike LitElement, which updates the DOM in response to property changes, Svelte compiles components to update the DOM directly, which can result in better performance for some applications.

stencil

Stencil is a compiler that generates web components with a focus on performance and compatibility. It provides a set of features similar to LitElement but includes a virtual DOM and TypeScript support out of the box.

README

LitElement

LitElement is simple base class for creating fast, lightweight web components with lit-html.

Looking for Lit?

LitElement is now part of the Lit library monorepo. Lit 2 includes lit-html 2.x and LitElement 3.x.

This repo contains the code for LitElement 2.x.

Documentation

For LitElement 2.x documentation, see the legacy documentation site.

For Lit 2, the next version of LitElement and lit-html, see the Lit site.

Overview

LitElement uses lit-html to render into the element's Shadow DOM and adds API to help manage element properties and attributes. LitElement reacts to changes in properties and renders declaratively using lit-html. See the lit-html guide for additional information on how to create templates for lit-element.

import {LitElement, html, css, customElement, property} from 'lit-element';

// This decorator defines the element.
@customElement('my-element')
export class MyElement extends LitElement {

  // This decorator creates a property accessor that triggers rendering and
  // an observed attribute.
  @property()
  mood = 'great';

  static styles = css`
    span {
      color: green;
    }`;

  // Render element DOM by returning a `lit-html` template.
  render() {
    return html`Web Components are <span>${this.mood}</span>!`;
  }

}

<my-element mood="awesome"></my-element>

Note, this example uses decorators to create properties. Decorators are a proposed standard currently available in TypeScript or Babel. LitElement also supports a vanilla JavaScript method of declaring reactive properties.

Examples

• Runs in all supported browsers: Glitch

• Runs in browsers with JavaScript Modules: Stackblitz, JSFiddle, JSBin, CodePen.

• You can also copy this HTML file into a local file and run it in any browser that supports JavaScript Modules.

Installation

From inside your project folder, run:

$ npm install lit-element

To install the web components polyfills needed for older browsers:

$ npm i -D @webcomponents/webcomponentsjs

Supported Browsers

The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.

Edge and Internet Explorer 11 require the web components polyfills.

Forward Compatibility With Lit 2

Lit 2 (LitElement 3.0) has a few breaking changes and deprecations that have been back-ported to LitElement 2.5 in order to ease upgrading.

To prepare for Lit 2, update these APIs:

LitElement 2.4	LitElement 2.5/Lit 2
Decorator imports: import {customElement} from 'lit-element';	import {customElement} from 'lit-element/decorators.js';
@internalProperty() foo;	@state() foo;
Override _getUpdateComplete()	Override getUpdateComplete()
Shadow root options: Override createRenderRoot().	Add static shadowRootOptions.
import {UpdatingElement} from 'lit-element';	import {ReactiveElement} from 'lit-element';

Contributing

Please see CONTRIBUTING.md.